<template>
  <div>
    <theme>
      <cp-line
        ref="line"
        :style="{ height: '260px' }"
        :option="useOption"
        :data="data"
        :extendOption="useExtendOption"
      >
      </cp-line>
    </theme>
  </div>
</template>
<script>
import Theme from '@cci/cp-theme'
import CpLine from '@cci/cp-line'
import { merge } from '@cci/lib-charts-utils'
const baseExtendOption = {}
const baseOption = {
  grid: {
    left: 20,
    right: 30,
    bottom: 30,
    top: 30,
    containLabel: true
  },
  series: [
    {
      symbol: 'circle', //拐点样式
      symbolSize: 8, //拐点大小
      areaStyle: {
        normal: {
          color: {
            colorStops: [],
            globalCoord: false
          }
        }
      }
    }
  ],
  areaStyle: {},
  xAxis: {
    show: true,
    type: 'category',
    boundaryGap: true,
    axisLabel: {
      color: '#000'
    },
    axisLine: {
      lineStyle: {
        color: '#000'
      }
    }
  },
  yAxis: {
    name: '(数量)',
    type: 'value',
    axisLabel: {
      color: '#000'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#000'
      }
    }
  }
}
const baseData = [
  {
    x: 'Mon',
    y: 820
  },
  {
    x: 'Tue',
    y: 932
  },
  {
    x: 'Wed',
    y: 901
  },
  {
    x: 'Thu',
    y: 934
  },
  {
    x: 'Fri',
    y: 1290
  },
  {
    x: 'Sat',
    y: 1330
  },
  {
    x: 'Sun',
    y: 1320
  }
]
export default {
  name: 'ChartLine',
  components: { Theme, CpLine },
  props: {
    data: {
      type: Array,
      default() {
        return baseData
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    extendOption: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {},
  computed: {
    useOption() {
      return merge({}, baseOption, this.option)
    },
    useExtendOption() {
      return merge({}, baseExtendOption, this.extendOption)
    }
  }
}
</script>